<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jsp/component/common.jsp" %>
<html>
<head>
    <title>高血压月度报告</title>
    <link rel="stylesheet" href="${frames}/css/lib/bootstrap.min.css" type="text/css" type="text/css">
    <link rel="stylesheet" href="${frames}/css/lib/dataTables.bootstrap.css" type="text/css">
    <link rel="stylesheet" href="../assets/css/views/modules/_common.scss">
    <link rel="stylesheet" href="${newframe}/css/base/base.css" type="text/css">
    <link rel="stylesheet" href="${assets}/css/views/department/departmentMgr.css">
    <script src="${newframe}/js/compatible.js"></script>
    <script src="${js}/jquery-1.9.1.min.js"></script>
    <script src="../assets/js/views/vue.min.js"></script>
    <%@ include file="/WEB-INF/jsp/component/commonBottom.jsp" %>
    <style>
        @page
        {
            size: auto;   /* auto is the initial value */
            margin: 10mm 5mm 10mm 5mm;  /* this affects the margin in the printer settings 最关键的还是这个*/
        }
        @page body div:nth-child(1){
            padding:50px 0;
        }
        body
        {
            margin: 0mm;  /* this affects the margin on the content before sending to printer */
            font-family: MicrosoftYaHei;
        }
        h1{
            font-family: MicrosoftYaHei;
            font-size: 20px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0.4px;
            color: #2a3137;
            text-align:center;
        }
        .containers{
            margin-left:20px;
            margin-right:20px;
            margin-top:30px;
        }
        .title{
            font-family: MicrosoftYaHei;
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0.3px;
            color: #666666;
            margin-left:10px;
        }
        .content{
            height:auto !important;
            width:99% !important;
            box-shadow:none !important;
        }
        .infor span{
            font-size:15px;
            line-height:33px;
            color:#666666;
            display:inline-block;
        }
        b{
            font-family: MicrosoftYaHei-Bold;
            font-size: 15px;
            font-weight: normal;
            font-stretch: normal;
            color: #333333;
        }
        .checknews ul li{
            float:left;
            width:46%;
            border: solid 1px #e6e6e6;
            margin-left:2%;
            padding:4% 0;
        }
        .checknews ul li div{
            width:190px;
            margin:0 auto;
        }
        .checknews ul li div img{
            display:inline-block;
            width:58px;
            vertical-align:middle;
        }
        .checknews ul li div div{
            display:inline-block;
            width:97px;
            margin-left:27px;
            vertical-align:middle;
        }
        .checknews ul li div div p{
            text-align:center;
            font-family: MicrosoftYaHei;
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #333333;
        }
        .checknews ul li div div p:nth-child(1){
            font-size:30px;
            line-height:40px;
        }
        label{
            font-family: PingFang-SC-Regular;
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 35px;
            letter-spacing: 0px;
            color: #999999;
        }
        .bpnews{
            margin-left:1.8%;
            margin-top:10px;
        }
        .bpnews div span{
            display:inline-block;
            text-align:center;
            font-family: PingFang-SC-Regular;
            font-size: 16.1px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #666666;
        }
        .first1 span{
            margin-left:3%;
            margin-right:3%;
        }
        table thead th{
            font-family: MicrosoftYaHei;
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 30px;
            letter-spacing: 0px;
            color: #666666;
            text-align:center;
        }

        .factor{
            width:97%;
            margin:0 auto;
            margin-top:15px;
        }
        .factor li{
            font-family: PingFang-SC-Regular;
            font-size: 16.1px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #333333;
        }
        .factor li p{
            vertical-align:top;
            display:inline-block;
            margin-top:1px;
            width:80%;
            line-height:35px;
        }
        .live span{
            margin-left:3%;
            margin-right:3%;
        }
        th{
            cursor:auto !important;
        }
        td{
            color:#333333;
            text-align:center;
            font-family: MicrosoftYaHei;
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 30px;
            letter-spacing: 0px;
            color: #333333;
            line-height:46px;
        }
        tr{
            border-bottom:1px solid #e6e6e6
        }
        .nonejson{
            font-family: PingFang-SC-Regular;
            font-size: 16.1px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #333333;
            line-height:30px;
        }
        .infor span{
            margin-left:3%;
            margin-right:3%;
        }
        .btn{
            width: 80px;
            line-height:16px;
            background-color:#35acfd;
            border-radius: 5px;
            font-family: MicrosoftYaHei;
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0.3px;
            color: #ffffff;
            border:none;
            margin-bottom:3px;
        }
        .stamp{
            background:white;
            color:black;
            border:1px solid #666666;
        }
        .activebtn{
            width: 80px;
            line-height:17px;
            background-color:#35acfd;
            border-radius: 5px;
            font-family: MicrosoftYaHei;
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0.3px;
            color: #ffffff;
            border:none;
            margin-bottom:3px;
        }
        input{
            line-height:25px !important;
            height:28px !important;
            width:100px !important;
            display:inline-block !important;
        }
        .text{
            font-family: PingFang-SC-Regular;
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 25.3px;
            letter-spacing: 0px;
            color: #333333;
            width:97% !important;
            margin:0 auto;
            margin-top:15px;
            height:90px;
            border:1px solid rgb(230, 230, 230);
            text-indent:2.5rem;
        }
    </style>
</head>
<body>
<%@ include file="../../breadline.jsp" %>
<!--startprint-->
<div style="background:white;padding-bottom:30px;">
    <div class="wrap" style="width:842px;overflow:hidden;margin:0 auto;border-left:1px solid #e6e6e6;border-right:1px solid #e6e6e6;">
        <div class="content" id="content">
            <div style="width:100%;overflow:hidden;position:relative;height:60px;">
                <h1 style="position:absolute;width:100%;text-align:center;">{{ datetimes }}月检测报告</h1>
                <div style="position:absolute;top:16px;right:3%;" class="click">
                    <span style="font-size:16px;">时间</span>
                    <input id="input" onclick="setmonth(this)" class="form-control input" @blur="getMonth()">
                    <button class="btn stamp" disabled @click="printdiv()" style="margin-left:10px;">打印</button>
                </div>
            </div>
            <p style="height: 1px;background-color: #e6e6e6;width:92%;margin:0 auto;"></p>
            <div class="containers">
                <div class="illnessnews">
                    <div>
                        <span class="lump" style="width:5px;padding-bottom:25px;background-color:#35acfd;display:inline-block;vertical-align:middle"></span>
                        <span class="title">病人基本信息</span>
                    </div>
                </div>
                <div class="first_news">
                    <div style="display: flex;">
                        <div class="infor" style="width:90%;margin-left:2%;margin-top:15px;">
                            <div>
                                <span style="margin-left:0px;">姓名: &nbsp;{{infor.realname}}</span>
                                <span>性别: &nbsp;{{infor.sex}}</span>
                                <span>年龄: &nbsp;{{infor.age}}</span>
                                <span>出生日期: &nbsp;{{infor.birthday}}</span>
                            </div>
                            <div>
                                <span style="margin-left:0px;">身份证号: &nbsp;{{infor.idcard}}</span>
                                <span>联系电话: &nbsp;{{infor.phone}}</span>
                            </div>
                            <div>
                                <span style="margin-left:0px;">身高: &nbsp;{{infor.height}}cm</span>
                                <span>体重: &nbsp;{{infor.weight}}kg</span>
                                <span>BMI: &nbsp;{{infor.bMI}}</span>
                                <span>腰围: &nbsp;{{infor.waist}}cm</span>
                            </div>
                            <div class="other">
                                <span style="margin-left:0px;">地址: &nbsp;{{infor.homeaddress}}</span>
                            </div>
                            <div>
                                <span style="margin-left:0px;">现患疾病诊断信息: &nbsp;{{infor.diseaseDiagnosis}}</span>
                            </div>
                            <div class="type" style="margin-top:5px;">
                                <b style="margin-right:5%;font-weight: 100;">建档医生: &nbsp;{{infor.doctor}}</b>
                                <b style="font-weight: 100;">建档机构: &nbsp;{{infor.hospName}}</b>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <p style="height: 1px;background-color: #e6e6e6;width:92%;margin:0 auto;margin-top:30px;"></p>
            <div class="containers">
                <div class="checknews">
                    <div class="illnessnews">
                        <div>
                            <span class="lump" style="width:5px;padding-bottom:25px;background-color:#35acfd;display:inline-block;vertical-align:middle"></span>
                            <span class="title">检测信息</span>
                        </div>
                    </div>
                    <ul style="width:95%;margin:0 auto;overflow: hidden;margin-top:25px;margin-bottom:25px;">
                        <li>
                            <div>
                                <img src="../assets/images/times.png" alt="img">
                                <div>
                                    <p>{{bigtimes}}</p>
                                    <p>总共检验次数</p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div>
                                <img src="../assets/images/times1.png" alt="">
                                <div>
                                    <p>{{smalltimes}}</p>
                                    <p>血糖异常次数</p>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <p style="height: 1px;background-color: #e6e6e6;width:92%;margin:0 auto;margin-top:30px;"></p>
            <div class="containers">
                <div>
                    <span class="lump" style="width:5px;padding-bottom:25px;background-color:#35acfd;display:inline-block;vertical-align:middle"></span>
                    <span class="title">糖尿病信息</span>
                </div>
                <div class="bpnews">
                    <div class="first1">
                        <label>血糖类型</label>
                        <span>{{infor.bsType}}类</span>
                        <label>糖尿病并发症</label>
                        <span style="width:auto;">{{illness}}</span>
                    </div>
                    <div>
                        <label>管理方式</label>
                        <span style="margin-left:1.6%;" v-if="factor.managementType === 1">一般管理</span>
                        <span style="margin-left:1.6%;" v-else="factor.managementType === 2">强化管理</span>
                        <span style="margin-left:1.6%;" v-else></span>
                    </div>
                </div>
            </div>
            <p style="height: 1px;background-color: #e6e6e6;width:92%;margin:0 auto;margin-top:25px;"></p>
            <div class="containers">
                <div>
                    <span class="lump" style="width:5px;padding-bottom:25px;background-color:#35acfd;display:inline-block;vertical-align:middle"></span>
                    <span class="title">高危因素</span>
                </div>
                <ul class="factor">
                    <li v-if="factor.danger">
                        <p>测量空腹血糖和血压，并评估是否存在危急情况，如出现血糖≥16.7mmol/L 或血糖≤3.9mmol/L；
                            收缩压≥180mmHg 和/或舒张压≥110mmHg</p>
                    </li>
                    <li v-if="factor.symptom">
                        <p>意识或行为改变、呼气有烂苹果样丙酮味、心悸、出汗、食欲减退、恶心、呕吐、多饮、多尿、腹痛、
                            有深大呼吸、皮肤潮红</p>
                    </li>
                    <li v-if="factor.heartbeat">
                        <p>持续性心动过速（心率超过 100 次/分钟）</p>
                    </li>
                    <li v-if="factor.temperature">
                        <p>体温超过 39 摄氏度或有其他的突发异常情况，如视力突然骤降、
                            妊娠期及哺乳期血糖高于正常值</p>
                    </li>
                </ul>
                <p class="nonejson" style="text-align:center;width:100%;" v-if="Lilength === 0">暂无数据</p>
            </div>
            <p style="height: 1px;background-color: #e6e6e6;width:92%;margin:0 auto;margin-top:25px;"></p>
            <div class="containers">
                <div>
                    <span class="lump" style="width:5px;padding-bottom:25px;background-color:#35acfd;display:inline-block;vertical-align:middle"></span>
                    <span class="title">正常数据</span>
                </div>
                <div id="tablepart">
                    <div style="margin-top:25px;margin-bottom:25px;">
                        <table id="example1" class="display" cellspacing="10" width="98%">
                            <thead>
                                <tr style="width:100%;height:30px;background:url('../assets/images/bgimg.png') no-repeat 0 0;bordr:none !important;cursor:auto !important;background:#e6e6e6;">
                                    <th style="width:33%">检测时间</th>
                                    <th style="width:33%">血糖值</th>
                                    <th style="width:33%">类型</th>
                                </tr>
                            </thead>
                            <tbody>
                            <tr v-for="item in bsjson">
                                <td>{{ item.TestTime }}</td>
                                <td>
                                    {{item.TestValue}}
                                </td>
                                <td>
                                    <span v-if="item.TestItemCode === '105002' ">
                                        餐后血糖
                                    </span>
                                    <span v-else="item.TestItemCode === '105001' ">
                                        空腹血糖
                                    </span>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <p v-show="bsshow" class="nonejson" style="text-align:center;width:100%;">暂无数据</p>
                    </div>
                    <div>
                        <span class="lump" style="width:5px;padding-bottom:25px;background-color:#35acfd;display:inline-block;vertical-align:middle"></span>
                        <span class="title">异常数据</span>
                    </div>
                    <div style="margin-top:25px;margin-bottom:25px;">
                        <table id="example" class="display" cellspacing="10" width="98%">
                            <thead>
                            <tr style="width:100%;height:30px;background:url('../assets/images/bgimg.png') no-repeat 0 0;bordr:none !important;cursor:auto !important;background:#e6e6e6;">
                                <th style="width:33%">检测时间</th>
                                <th style="width:33%">血糖值</th>
                                <th style="width:33%">类型</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="item in unbsjson">
                                <td>{{ item.TestTime }}</td>
                                <td>
                                    {{item.TestValue}}
                                </td>
                                <td>
                                    <span v-if="item.TestItemCode === '105002' ">
                                        餐后血糖
                                    </span>
                                    <span v-else="item.TestItemCode === '105001' ">
                                        空腹血糖
                                    </span>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <p v-show="unbsshow" class="nonejson" style="text-align:center;width:100%;">暂无数据</p>
                    </div>
                </div>
            </div>
            <div class="containers">
                <div>
                    <span class="lump" style="width:5px;padding-bottom:25px;background-color:#35acfd;display:inline-block;vertical-align:middle"></span>
                    <span class="title">医生建议</span>
                </div>
                <textarea class="text" type="text" v-model="text"></textarea>
            </div>
        </div>
    </div>
</div>
<!--endprint-->
<script>
    var vm = new Vue({
        el:'.wrap',
        data:{
            idcard:'',
            infor:[],
            bsjson:[],
            unbsjson:[],
            factor:[],
            unbsshow:false,
            bsshow:false,
            bigtimes:'',
            smalltimes:'',
            illness:[],
            datetimes:'',
            month:'',
            datetime:'',
            Lilength:'',
            text:''
        },
        mounted(){
            // 初始化获取当前病人 idcard
            let that = this;
            if( localStorage.getItem("text") ){
                that.text = localStorage.getItem("text")
            }else{
                that.text = '糖尿病治疗不仅需要药物更需要知识，更需要行为的改变。治疗糖尿病需要医生和病人两方面积极性。病人的积极性更为重要。'
            }
            var href = decodeURI(decodeURI(location.search.split('?')[1]));
            var arr = href.split('&')[0]
            var url = arr.split('=')[1]
            that.idcard = url
            var arr1 = href.split('&')[1]
            // 获取传递过来的日期时间
            var datetime = href.split('&')[1].split('=')[1].slice(0,7)
            that.datetimes = datetime.slice(0,4) + '年' + datetime.slice(5,7)
            that.datetime = datetime.slice(0,4) + '-' + datetime.slice(5,7)
            that.month = datetime.slice(0,4) + '-' + datetime.slice(5,7)
            $('#input').val(that.month)
            // 获取病人信息
            $.ajax({
                url:"${URL_PATIENT_PATIENTINFO}",
                type:'post',
                dataType: "json",
                data:{
                    idCard:url
                },
                success: function(data){
                    that.infor = data.data;
                    var arr = ['冠心病','高血糖','高血脂','视网膜病变','周围神经病变','足部病变','脑卒中','冠心病(心肌梗塞)']
                    if( that.infor.bsComplication != null ){
                        var arr1 = that.infor.bsComplication.split(",")
                        for( var a = 0 ; a < arr1.length; a++ ){
                            that.illness.push(arr[arr1[a]-1])
                        }
                        that.illness = that.illness.join(',')
                    }else{
                        that.illness =""
                    }
                }
            })
            // 因素
            that.factors(url,that.datetime)
            // 获取表格数据
            that.table(url,that.datetime)
        },
        methods:{
            getMonth:function(){
                return this.get()
            },
            get:function(){
                let that = this;
                setTimeout(function(){
                    that.datetime = $('#input').val()
                    that.datetimes = that.datetime.slice(0,4) + '年' + that.datetime.slice(5,7)
                    Promise.all([
                        that.factors(that.idcard,that.datetime),
                        that.table(that.idcard,that.datetime)
                    ]).then(function(resultList){
                        that.$forceUpdate()
                    })
                },100)
            },
            // 打印
            printdiv:function(){
                let that = this;
                // 将输入的数据保存在本地
                localStorage.setItem("text",that.text);
                if(navigator.userAgent.toLowerCase().indexOf("chrome") == -1){
                    alert('请使用谷歌浏览器，否则相关功能将不能正常使用！')
                }
                this.remove_ie_header_and_footer()
                $('.click').css({
                    'display' : 'none'
                })
                $('.wrap').css({
                    'border' : 'none'
                })
                $('.lump').css({
                    'display' : 'none'
                })
                $('body').css({
                    'fontSize': '14px',
                    'fontFamily' : 'MicrosoftYaHei'
                })
                $('.text').text(that.text)
                $('.text').css({
                    'border':'none'
                })
                // 获取当前页的html代码
                var bdhtml = window.document.body.innerHTML
                // 设置打印开始区域
                var startStr = '<!--startprint-->'
                // 设置打印结束区域
                var endStr = '<!--endprint-->'
                // 从标记里获取需要打印的页面
                var printHtml = bdhtml.substring(bdhtml.indexOf(startStr) + startStr.length, bdhtml.indexOf(endStr))
                // 也可以通过id获取
                // var printHtml = document.getElementById('printid').innerHTML
                // 需要打印的页面
                window.document.body.innerHTML = printHtml
                window.print()
                // 还原界面
                window.document.body.innerHTML = bdhtml
                parent.showSrc('${URL_MONTHREPORT_TOBSREPORT}?idcard=' + that.idcard + '&date=' + that.datetime)
            },
            // 页眉页脚
            remove_ie_header_and_footer:function(){
                var hkey_path;
                $('h1').css({
                    'fontSize' : '30px'
                })
                try{
                    var RegWsh = new ActiveXObject("WScript.Shell")
                    hkey_key="header"
                    RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"&w&b页码，&p/&P")
                    hkey_key="footer"
                    RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"&u&b&d")
                }catch(e){}
            },
            table:function(url,datetime){
                let that = this;
                $.ajax({
                    url:"${URL_TESTRESULT_PATIENTTESTS}",
                    data:{
                        idCard:url,
                        reportTime:datetime,
                        testKindCode:'105'
                    },
                    dataType:"json",
                    type:"post",
                    success:function(data){
                        if( data.dataList.length != 0 ) {
                            var arr = data.dataList;
                            for( var a = 0; a < arr.length; a++ ){
                                arr[a].TestTime = arr[a].TestTime.slice(0,10)
                                if( arr[a].TestItemCode.slice(0,3) === '105' ){
                                    if( arr[a].error === 0 ){
                                        that.bsjson.push(arr[a])
                                        if( that.bsjson.length === 0 ){
                                            that.bsshow = true;
                                        }else{
                                            that.bsshow = false;
                                        }
                                    }else if( arr[a].error === 1 ){
                                        that.unbsjson.push(arr[a])
                                        if( that.unbsjson.length === 0 ){
                                            that.unbsshow = true;
                                        }else{
                                            that.unbsshow = false;
                                        }
                                    }
                                }
                            }
                            that.bigtimes = parseInt(that.unbsjson.length) + parseInt(that.bsjson.length)
                            that.smalltimes = that.unbsjson.length
                        }else{
                            that.bsjson = []
                            that.bigtimes = 0;
                            that.smalltimes = 0;
                            that.unbsjson = []
                            that.bsshow = true;
                            that.unbsshow = true
                        }
                    }
                })
            },
            factors:function(url,datetime){
                let that = this;
                $.ajax({
                    url:"${URL_SCREENING_BSMONTH}",
                    data:{
                        reportTime:datetime,
                        idCard:url
                    },
                    dataType:"json",
                    type:'post',
                    success:function(data){
                        if( data.data != null ){
                            that.Lilength = '1'
                            that.factor = data.data
                            setTimeout(function(){
                                // 获取 li 长度
                                var factor = $('.factor li')
                                // 添加序号
                                for( var a = 0; a < factor.length; a++ ){
                                    var label = '<label style="margin-right:2%;">' + '( ' + (a+1) + ' )' + '</label>'
                                    $(factor[a]).prepend(label)
                                }
                            },10)
                        }else{
                            that.factor = ''
                            var factor = $('.factor li')
                            that.Lilength = factor.length
                        }
                    }
                })
            }
        },
        watch:{
            'bsjson':function(val,oldval){
                if( val ){
                    $('.stamp').removeAttr("disabled").addClass('activebtn')
                }
            }
        }
    })
</script>
<%-- 引入时间选择器插件 --%>
<script src="../assets/js/views/DatePicker.js"></script>
</body>
</html>
